<template>
	<div class="dev">
		<el-breadcrumb separator="|" class="tree">
			<el-breadcrumb-item>
				<div class="title">
					<i class="el-icon-s-operation"></i>
					<span>功能树</span>
					<i class="el-icon-arrow-right"></i>
				</div>
				<div class="fntree-item" :class="{ active: activeIndex == 'MY' }">
					<a @click="eventChangeTree({ dealType: 'MY', orderStage: '50030002,50030003,50030004' })"><i class="el-icon-caret-right"></i><i class="el-icon-folder"></i> <span>我的订单</span></a>
				</div>
			</el-breadcrumb-item>
			<el-breadcrumb-item>
				<div class="fntree-item" :class="{ active: activeIndex == 'DEAL' }">
					<a @click="eventChangeTree({ dealType: 'DEAL', orderStage: '50030002,50030003,50030004' })"><i class="el-icon-caret-right"></i><i class="el-icon-folder"></i> <span>待我处理订单</span></a>
				</div>
			</el-breadcrumb-item>
			<el-breadcrumb-item>
				<div class="fntree-item" :class="{ active: activeIndex == 'JTALL'||activeIndex == 'ALL' }">
<!--          <a @click="eventChangeTree({ dealType: 'JTALL', orderStage: '50030002,50030003,50030004' })"><i class="el-icon-caret-right"></i><i class="el-icon-folder"></i> <span>所有订单</span></a>-->
					<a @click="allOrderChangeTree"><i class="el-icon-caret-right"></i><i class="el-icon-folder"></i> <span>所有订单</span></a>
				</div>
			</el-breadcrumb-item>
			<el-breadcrumb-item>
				<div class="fntree-item" :class="{ active: activeIndex == 'MYDEAL' }">
					<a @click="eventChangeTree({ dealType: 'MYDEAL', orderStage: '50030002,50030003,50030004' })"><i class="el-icon-caret-right"></i><i class="el-icon-folder"></i> <span>我已处理</span></a>
				</div>
			</el-breadcrumb-item>
			<el-breadcrumb-item>
				<div class="fntree-item" :class="{ active: activeIndex == 'WARN' }">
					<a @click="eventChangeTree({ dealType: 'WARN', orderStage: '50030011' })"><i class="el-icon-caret-right"></i><i class="el-icon-folder"></i> <span>我的预警</span></a>
				</div>
			</el-breadcrumb-item>
			<el-breadcrumb-item>
				<div class="fntree-item" :class="{ active: activeIndex == 'DGZ' }">
					<a @click="eventChangeTree({ dealType: 'DGZ', orderStage: '50030010' })"><i class="el-icon-caret-right"></i><i class="el-icon-folder"></i> <span>我的关注</span></a>
				</div>
			</el-breadcrumb-item>
			<el-breadcrumb-item></el-breadcrumb-item>
		</el-breadcrumb>
	</div>
</template>

<script>
import { mapMutations, mapActions, mapGetters, mapState} from "vuex";
export default {
	created() {
		this.eventChangeTree({
			dealType:"DEAL",
			orderStage:"50030002,50030003,50030004",
		});
	},
	data() {
		return {
			activeIndex: "DEAL",
		};
	},
	computed: {
    ...mapState('user',['user']),
		...mapGetters(["conditions","countConditions"]),
	},
	methods: {
		...mapMutations("orders", ["SET_DEALTYPE"]),
		...mapActions("orders", ["qryPendingOrderList", "clearQryConditions", "qryPendingOrderTree"]),
    allOrderChangeTree(){
		  let dealType = '';
		  if(this.user.orgId=='1944640'){
		    dealType = 'JTALL';
      }else{
		    dealType = 'ALL';
      }
      this.eventChangeTree({ dealType: dealType, orderStage: '50030002,50030003,50030004'});
    },
		/**
		 * 切换目录
		 */
		eventChangeTree(obj) {
      this.$store.commit('orders/SET_UNTREELIST', []);
			this.activeIndex = obj.dealType;
			// 切换目录需要重置查询条件
			this.clearQryConditions();
			// 改变一级目录状态
			this.SET_DEALTYPE(obj.dealType);
			// 每次切换一级目录,需要清除上一次的子项

			// 根据当前传入的值获取二级功能列表:待我处理和我已处理传值相同
      let cods = {
        conditions: {
          orderStage: obj.orderStage,
          systemUserId: this.user.acctId,
          staffId: this.user.staffId,
          orgId: this.user.orgId
        },
        countConditions: this.countConditions,
      };
      if(obj.dealType == 'DEAL' || obj.dealType == 'MYDEAL'){
        // 暂时屏蔽 功能树
        this.qryPendingOrderTree(cods);
      }
			//点击顶级目录需要进行一次工单列表查询
			this.qryPendingOrderList(this.conditions);
    },
	},
};
</script>

<style lang="scss" scoped>
.dev {
	.tree {
		padding: .2rem .1rem;
		background-color: #fff;
		border-radius: 0 0 0 0;
		.el-breadcrumb__inner {
			font-size: $fontSize_base;
			div {
				display: inline-block;
			}
			i {
				margin-right: .05rem;
			}

			.title {
				font-size: $fontSize_v2;
				color: #f56d39;
				font-weight: 600;
				// .el-icon-s-operation{
				//   margin-right:5px;
				// }
			}
		}
		.fntree-item.active {
			color: #f56d39;
		}
	}
}
.el-breadcrumb__separator {
	color: #eee !important;
}
</style>
